{extend name="template/base" /}
{block name="content"}
<div class="page-container">

    <style>
        .text-c{}
        .text-c td{border-left:none;}
        .text-c td input {width:15px;height:15px;}
        .open{position:relative;font-size:25px;}
        .open span{width:50%;height:50%;display:inline-block;border-bottom:1px #999 solid;border-left:1px #999 solid;position:absolute;right:0;top:0;}
        .open i {height:100%;width:50%;border-left:1px #999 solid;float:right;display:inline-block;position:absolute;right:0;}
        .open div{height:30%;width:50%;position:absolute;right:0;bottom:0;border-left:1px #999 solid;}
        .box{border:1px #ccc solid;width:100%;display:inline-block;}
        .delete{font-size:15px;font-weight:600;background:#eee;width:15px;height:15px;border-radius:50%;line-height:12px;cursor:pointer;position:absolute;right:-5px;top:-5px;}
        .box .title{background:#eee;padding:0 20px;line-height:30px;}
        .listBox{width:100%;margin-right:-20px;display:inline-block;}
        .listBox .list{
            font-size:14px;
            color:#020202;
            background:#f5f5f5;
            border-radius:10px;
            width:138px;
            display:inline-block;
            float:left;
            margin:20px;
            text-align:left;
            position:relative;
        }
        .listBox .list p{
            font-weight:600;
            margin:5px 0;text-align:center;
        }
        .listBox .list span{margin:5px 0;width:60px;display:inline-block;text-align:center;}
        .submits {border-top:1px #ccc solid;width:100%;background:#eee;height:40px;padding:5px 0;}
        .submits button{background:#5a98dd;font-size:15px;border-radius:5px;border:none;width:50px;height:30px;line-height:30px;color:#fff;margin:0 auto;display:block;cursor:pointer;}
        .submits button:hover{background:#0a6998;}
        .selected_box{
            background:#b7e3b7!important;
        }
    </style>
    <form class="mb-20" method="get" id="search3" onsubmit="return false" action="{:\\think\\Url::build($Request.action)}">
        <input type="text" class="input-text" style="width:250px" placeholder="订单号" name="order_id" value="{$Request.param.order_id}">
        <input type="text" class="input-text" style="width:250px" placeholder="预订人姓名" name="booking_people_name" value="{$Request.param.booking_people_name}">
        <input type="text" class="input-text" style="width:250px" placeholder="预订人电话" name="booking_people_phone" value="{$Request.param.booking_people_phone}">
        <input type="hidden" name="ajaxSearch" value="1">
        <input type="text" autocomplete="off" class="input-text Wdate  mb-5" style="width:250px" placeholder="出行日期开始日期" name="start_time" value="{$Request.param.start_time}" {literal} onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" {/literal} > 至
        <input type="text" autocomplete="off" class="input-text Wdate  mb-5" style="width:250px" placeholder="出行日期结束日期" name="end_time" value="{$Request.param.end_time}" {literal} onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" {/literal} >
        <div class="select-box" style="width:250px">
            <select name="platform" class="select">
                <option value="">选择平台</option>
                {foreach $platform as $pvo}
                <option value="{$pvo.platform_name}">{$pvo.name}</option>
                {/foreach}
            </select>
        </div>
        <input type="text" class="input-text" style="width:250px" placeholder="预订人备注" name="booking_people_remark" value="{$Request.param.booking_people_remark}">
        <button type="submit" class="btn btn-success" id="realname_btn" name="" onclick="submitData()"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
    </form>

    <!--改变-->
    <div id="test">
        {include file="ajaxpage"}
    </div>
    <div class="box">
        <div class="title">拼车结果</div>
        <div class="listBox">

        </div>
        <div class="submits">
            <button id="submit">提交</button>
        </div>
    </div>

    <script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
    <script>
        var new_arr = new Array;
        var ids = new_arr;
        var names = new_arr;
        function deltd(ele){

            layer.msg("该状态下不可更改", {
                time: 2000, //2s后自动关闭
            });
            return ;

        }
        function show_traveller_info(id) {
            $("#"+id+"").toggle();
            console.log(id)
        }
        function show_relevance_order(id) {
            $("#relevance_"+id+"").toggle();
            console.log(id)
        }
        $(function () {
//            $(".traveller_info").click(function(e) {
//                var id = $(".traveller_info").attr('data-val');
//                $("#"+id+"").toggle();
//                console.log(id)
//            });
            $(".listBox").on("click",".driver",null,function (event) {

                event.stopPropagation();  //只阻止了冒泡事件， 默认默认行为没有阻止
                var has_class=$(this).parent().hasClass('selected_box');
                $(".list").removeClass("selected_box");
                $(this).parent().addClass('selected_box');


                //获取点击的订单id
                var order_id = $(this).next()[0]['attributes']['data-traveler_oid'].nodeValue
                //获取所有司机user_id
                var driver_user_ids = new Array();
                $(".box").find(".driver").each(function () {
                    driver_user_id = $(this).data('user_id');
                    driver_user_ids.push(driver_user_id);
                })
                var driver_user_ids_str = 0;
                if(driver_user_ids){
                    driver_user_ids_str = driver_user_ids.join(',');
                }
                console.log('你进入到司机列表')
//                 console.log('order_id',order_id)
//                 console.log('driver_user_ids',driver_user_ids)
                //打开司机列表页面
                var index = layer.open({
                    type: 2,
                    area: ['80%', '75%'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/admin/order_traveler/driver/driver_user_id/'+driver_user_ids_str+'/order_id/'+ order_id //增加订单id
                });
            })
            $("body").on("click",".listBox",null,function () {
                $(".list").removeClass("selected_box");
            })
            $(".listBox").on("click",".delete",null,function () {
                //获取所有oid
                var oids=new Array();
                $(this).parent().find(".traveler").each(function () {
                    var this_oid=$(this).data('traveler_oid');
                    oids[this_oid]=this_oid;
                })
                //还原选择按钮状态
                for (oid in oids)
                {
                    $(".checkbox_"+oid).removeAttr("checked");
                }
                $(this).parent().remove();
            })

            $(".listBox").on("click",".list",null,function (event) {
                console.log('你点击了阻止冒泡时间');
                event.stopPropagation();  //只阻止了冒泡事件， 默认默认行为没有阻止
                var has_class=$(this).hasClass('selected_box');
                $(".list").removeClass("selected_box");
                if(!has_class){
                    $(this).addClass('selected_box');
                }
            })

            $(".checkbox_oid").click(function () {
                console.log('123')
                var selected_box = $(".selected_box");//length
                if(selected_box.length > 0){
                    selected_box = selected_box.eq(0);
                }else{
                    selected_box = null;
                }
                var list = $(this).val()
                var oid = $(this).prop('name')
                var arr = list.split(',')
                console.log('len',arr)
                var traveler_ids = new Array
                var traveler_names = new Array
                for(var i = 0;i<arr.length;i++){
                    var temp = arr[i].split('-')
                    traveler_ids[i] = temp[0]
                    ids.push(temp[0])
                    traveler_names[i] = temp[1]
                    names.push(temp[1])
                }
                console.log('traveler_ids',traveler_ids)
                console.log('traveler_names',traveler_names)
                var checked=$(this).is(":checked");//选中，返回true;没选中，返回false;
                var checked_name1 = 'relevance_checkbox_'+oid
                var checked_name2 = 'checkbox_'+oid
                // console.log('你选中的订单id是', oid);
                if(checked){
                    if(!$("."+checked_name1+"").is(":checked")){
                        $("."+checked_name1+"").prop("checked",true);
                    }
                    if(!$("."+checked_name2+"").is(":checked")){
                        $("."+checked_name2+"").prop("checked",true);
                    }
                    if(selected_box){
                        $(traveler_ids).each(function (index,e) {
                            var traveler_id = traveler_ids[index];
                            var traveler_name = traveler_names[index];
                            $(selected_box).append('<span class="traveler traveler_id_'+traveler_id+' traveler_oid_'+oid+'" data-traveler_id="'+traveler_id+'" data-traveler_oid="'+oid+'">'+traveler_name+'</span>');
                        })

                    }else{
                        $('.listBox').append('<div class="list selected_box"><div class="delete">×</div><p class="driver driver_0" data-user_id="0">选择司机</p></div>');
                        selected_box=$(".selected_box").eq(0);
                        $(traveler_ids).each(function (index,e) {
                            var traveler_id = traveler_ids[index];
                            var traveler_name = traveler_names[index];
                            $(selected_box).append('<span class="traveler traveler_id_'+traveler_id+' traveler_oid_'+oid+'" data-traveler_id="'+traveler_id+'" data-traveler_oid="'+oid+'">'+traveler_name+'</span>');
                        })
                    }
                }else{
                    if($("."+checked_name1+"").is(":checked")){
                        $("."+checked_name1+"").prop("checked",false);
                    }
                    if($("."+checked_name2+"").is(":checked")){
                        $("."+checked_name2+"").prop("checked",false);
                    }
                    $(".traveler_oid_"+oid).remove();
                }
            });
            $("#submit").click(function () {
                var groups=[];
                if($(".list").length <1){
                    layer.msg("请选择订单");
                    return false
                }
                var group = get_group($(".list"));
                if(!group.driver_user_id){
                    layer.msg("请分配好司机，不能为空");
                    return false
                }
                if(!group.traveler_id.length){
                    layer.msg("请分配好旅客，不能为空");
                    return false
                }
                groups.push(group);

                $.ajax({
                    type : "POST", //提交方式
                    url : "/admin/order_traveler/add_group",//路径
                    data : {
                        "groups" : groups
                    },//数据，这里使用的是Json格式进行传输
                    //返回数据根据结果进行相应的处理
                    success : function(result){
                        layer.msg(result.msg,{
                            time: 5000, //5s后自动关闭
                            btn: [ '刷新']
                        },function () {
                            location.reload()
                        });
                    }
                });
            });
            function get_group(list) {
                var driver = $(list).find('.driver').data();
                var travelers = new Array();
                var traveler_doms = $(list).find('.traveler');
                $(traveler_doms).each(function () {
                    var traveler_id = $(this).data('traveler_id');
                    travelers.push(traveler_id);
                })
                console.log('travelers',travelers);
                var group = {driver_user_id:driver.user_id,traveler_id:travelers};
                console.log('group',group);
                return group;
            }
        })
    </script>
    <script>
        //        搜索
        function submitData(){
            let formData = $('#search3').serialize(); // 获取表单的数据
            console.log('搜索的数据', formData)
            $.ajax({
                type: 'get',
                url: '/admin/dispatch_traveler_group/undistributed_traveller',
                data: formData,
                success: function (data) {
                    $('#test').html(data)
                }
            });
        }
        //无刷新分页
        $(document).on('click','.pagination a',function (event) {
            var url = $(this).attr('href');
            $.ajax({
                type: 'get',
                url: url,
                success: function (data) {
                    $('#test').html(data)
                }
            });
            return false;
        });
    </script>
</div>
{/block}

